<template>
<div>
  <div >
    <h2 class="title">我的收藏</h2>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <router-link :to="{path:'/newsDetail',query:{articleId:item.articleId}}">
          {{item.title}}
          </router-link>
      </li>
    </ul>
  </div>

</div>
</template>

<script>
import {getCollectList} from "@/api/api";

export default {
name: "myCollection",
  data(){
    return{
      list:[]
    }
  },created() {
    getCollectList().then(res=>{
      console.log(res)
      this.list = res.rows
      // console.log(this.list)
    })
  }
}
</script>

<style scoped lang="less">
div{
  height: 100vh;
  background-image: url("../assets/img/timg.jpg");
}
.title{
  height: 40px;
  line-height: 40px;
  background: #00aaff;
  color: white;
  text-align: center;
}
li{
  width: 80%;
  color: #2c3e50;
  height: 30px;
  border-radius: 20px;
  border: 1px dashed #ccc;
  text-overflow: ellipsis;
  padding: 5px 10px;
  overflow: hidden;
  white-space: nowrap;
  margin: 10px auto;
}
</style>